<template>
  <div class="order wh100">
    <navBar title="订单确认" :leftArrowFlag="true" />
    <div class="content">
      <div class="content_item">
        <div class="item_title"><span>祭扫服务</span></div>
        <van-card
          num="1"
          :price="sacrificePrice"
          title="祭扫服务基础费"
          :thumb="basciImg"
        />
      </div>
      <div class="content_item">
        <div class="item_title"><span>其他服务项目</span></div>
        <div class="card_list">
          <van-card
            v-for="(item, index) in selectItems"
            :key="index"
            :num="item.sales"
            :price="item.price"
            :title="item.title"
            :thumb="item.imgUrl1"
          />
        </div>
      </div>
      <div class="total_box">
        <span>合计：{{ totalPrice }}</span>
      </div>
      <!-- <div class="large_btn" @click="goOrderList">
        <span>提交</span>
      </div> -->
      <div class="btn_box">
          <van-button :loading='btnLoading' :disabled='btnDisabled' round block type="primary" @click="goOrderList"
            >提交</van-button
          >
        </div>
    </div>
  </div>
</template>

<script>
import navBar from "@/components/navBar";

import { replaceSacrifice_add } from "@/api/appointment/actingSacrificeSweep";
import { setTimeout } from "timers";
export default {
  data() {
    return {
       btnLoading:false,
      btnDisabled:false,
      basciImg:require('@/assets/imgs/basic.png'),
      selectItems: [],
      totalPrice: 0,
      sacrificePrice: 0,
    };
  },
  components: {
    navBar,
  },
  created() {
    console.log(this.$route.query.total, this.$route.query.sacrificePrice);
    this.selectItems = JSON.parse(
      localStorage.getItem("actingSacrificeSweep")
    ).commoditiesReqList;
    this.sacrificePrice = `${this.$route.query.sacrificePrice / 100}.00`;
    this.totalPrice = this.$route.query.total / 100;
  },
  methods: {
    async goOrderList() {
      let info = JSON.parse(localStorage.getItem("actingSacrificeSweep"));
      let goodsList = JSON.parse(localStorage.getItem("actingSacrificeSweep"))
        .commoditiesReqList;
      info.commoditiesReqList = [];
      goodsList.forEach((item) => {
        let { id, price, title, sales } = item;
        info.commoditiesReqList.push({ id, price, title, sales });
      });

      console.log(info, "info");
      //   return;
       this.btnLoading=true
      this.btnDisabled=true
      try {
        const res = await replaceSacrifice_add(info);
        console.log(res, 200);
        if (res.code === "2000") {
          this.$toast.success("预约成功");
          this.btnLoading=false
                this.btnDisabled=false
          this.$router.push("/appointment/orderList");
          localStorage.removeItem("actingSacrificeSweep");
          return;
        }
        this.$toast.fail(res.msg || "数据请求失败");
        this.btnLoading=false
                this.btnDisabled=false
      } catch (err) {
        console.log(err, 404);
        this.btnLoading=false
                this.btnDisabled=false
        this.$toast.fail(err.msg);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.order {
  display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex; 
display: flex;
  -moz-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
/deep/ .van-button--primary {
        width: 100%;
        margin: 0;
        border-radius: 0.1rem;
        background-color: $defaultColor;
        border: 1px solid $defaultColor;
        box-shadow: 0px 0px 10px $defaultColor;
      }
  .content {
    flex: 1;
    padding: 0.15rem;
    overflow-y: scroll;
    .content_item {
      .item_title {
        border-left: 3px solid $defaultColor;
        text-indent: 0.1rem;
      }
    }
    .total_box {
      display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex; 
display: flex;
      justify-content: flex-end;
      font-size: 16px;
      line-height: 0.28rem;
      padding-right: 0.2rem;
      margin: 0.2rem 0 1rem;
    }
  }
}
</style>
